<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Css高级选择器</title>
		<style type="text/css">
			/* 分组选择器 将多个选择器选中的元素组合在一起，统一设置样式 
			id选择器运行起来快 设置起来麻烦
			class相反*/
			.class1,
			#id1,
			div,
			input[name="pwd"],
			input[type="date"] {
				color: aliceblue;

				font-size: 30px;
				font-family: "黑体";

				background-color: #FFA500;
				background-image: url(../imgs/Bingbing_2.jpg);

				height: 80px;
				width: 400px;

				padding: 5px;

				/* 圆角边框 */
				border-radius: 20px;
				/* dashed虚线 */
				border: 2px dashed chocolate;

			}

			input[type='text'] {
				height: 50px;
				width: 300px;
				border-radius: 25px;
				text-align: left;

			}

			a {
				padding: 10px;
				background-color: #F0F8FF;
			}

			/* 未访问过的 */
			a:link {
				color: #008000;
			}

			/* 点的一瞬间的颜色 */
			a:active {
				color: #4169E1;
			}

			/* 悬停颜色 */
			a:hover {
				color: #FFA500;
			}

			/* 点过后的颜色 点过后就不会改变了 */
			a:visited {
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<!-- html中id是 元素的唯一标识 即使不同标签 id也不要相同 -->
		<div class="class1">为什么！</div>
		<div>为什么！！</div>
		<div>为什么！！！</div>
		<span id="id1">为什么要让我吃到！</span>
		<span>这么好吃的猪排饭！！</span>
		<span>我怕我以后再也吃不到怎么办！！！</span>
		<p>为什么！</p>

		<input type="text" />
		<input type="password" name="pwd" />
		<input type="date" />

		<a href="http://www.baidu.com" target="_blank">4388888</a>
		<a href="http://www.hao123.com" target="_blank">4388888</a>
	</body>
</html>
